<template>
  <pro-page>
    <pro-card>
      <pro-form-query-filter
        @reset="handleConsole('reset', $event)"
        @submit="handleConsole('submit', $event)"
        @collapse="handleConsole('collapsed', $event)"
      >
        <FormModelItem label="应用名称">
          <Input />
        </FormModelItem>
        <FormModelItem label="创建人">
          <Input />
        </FormModelItem>
        <FormModelItem label="应用状态">
          <Input />
        </FormModelItem>
        <FormModelItem label="地区">
          <Select>
            <Option value="admin">Admin</Option>
            <Option value="employee">Employee</Option>
          </Select>
        </FormModelItem>
      </pro-form-query-filter>
    </pro-card>

    <pro-card style="margin-top: 16px;">
      <pro-form-query-filter layout="vertical">
        <FormModelItem label="应用名称">
          <Input />
        </FormModelItem>
        <FormModelItem label="创建人">
          <Input />
        </FormModelItem>
        <FormModelItem label="应用状态">
          <Input />
        </FormModelItem>
        <FormModelItem label="地区">
          <Select>
            <Option value="admin">Admin</Option>
            <Option value="employee">Employee</Option>
          </Select>
        </FormModelItem>
      </pro-form-query-filter>
    </pro-card>

    <pro-card style="margin-top: 16px;">
      <pro-form-query-filter layout="vertical">
        <FormModelItem label="应用名称">
          <Input />
        </FormModelItem>
        <FormModelItem label="创建人">
          <Input />
        </FormModelItem>
        <FormModelItem label="应用状态">
          <Input />
        </FormModelItem>
      </pro-form-query-filter>
    </pro-card>

    <pro-card style="margin-top: 16px;">
      <pro-form-query-filter layout="vertical">
        <FormModelItem label="应用名称">
          <Input />
        </FormModelItem>
        <FormModelItem label="创建人">
          <Input />
        </FormModelItem>
        <FormModelItem label="应用状态">
          <Input />
        </FormModelItem>
        <FormModelItem label="地区">
          <Select>
            <Option value="admin">Admin</Option>
            <Option value="employee">Employee</Option>
          </Select>
        </FormModelItem>
        <FormModelItem label="更新时间" col-size="2">
          <RangePicker style="width: 100%;" />
        </FormModelItem>
      </pro-form-query-filter>
    </pro-card>
  </pro-page>
</template>

<script>
// import pro-form-query-filter from '@/components/Form/layouts/QueryFilter/index.vue'
import { FormModel, Input, Select, DatePicker } from 'ant-design-vue'

export default {
  name: 'DemoProForm',
  components: {
    // pro-form-query-filter,
    FormModelItem: FormModel.Item,
    Input,
    Select,
    Option: Select.Option,
    RangePicker: DatePicker.RangePicker
  },
  methods: {
    handleConsole(type, $event) {
      // eslint-disable-next-line
      console.log(type, $event)
    }
  }
}
</script>
